<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" id="name" placeholder="请输入名称" autocomplete="off">
        <input type="text" id="age" placeholder="请输入年龄" autocomplete="off">
        <input type="text" id="gender" placeholder="请输入性别" autocomplete="off">
        <input type="button" value="添加" id="add">
    </div>
    <table id="tb">
            <caption>学生信息表</caption>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>张三</td>
                <td>23</td>
                <td>男</td>
                <td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>
            </tr>
    </table>
</body>
<script>
    document.getElementById("add").onclick= function(){
        //创建表格中列的标签
        let tr = document.createElement("tr");
        //创建表格中单元格的标签
        let nameTh = document.createElement("td");
        let ageTh =document.createElement("td");
        let genderTh =  document.createElement("td");
        let deleteTh = document.createElement("td");
        //将单元格添加到表格列中
        tr.appendChild(nameTh);
        tr.appendChild(ageTh);
        tr.appendChild(genderTh);
        tr.appendChild(deleteTh);
        //获取input标签中的值
        let name  =  document.getElementById("name").value;
        let age   =  document.getElementById("age").value;
        let gender=  document.getElementById("gender").value;
        //根据获取到的信息创建文本元素,在、input中获取的数据只是一个字符串对象
        let nameText = document.createTextNode(name);
        let ageText = document.createTextNode(age);
        let genderText = document.createTextNode(gender);
        //将文本元素添加到单元格中
        nameTh.appendChild(nameText);
        ageTh.appendChild(ageText);
        genderTh.appendChild(genderText);
        //创建超链接标签和显示文本以及添加href属性
        let a = document.createElement("a");
        let aText = document.createTextNode("删除");
        a.setAttribute("href","JavaScript:void(0)");
        a.setAttribute("onclick","drop(this)")
        a.appendChild(aText);
        deleteTh.appendChild(a)
        //获取table元素,将tr标签添加table中
        let table = document.getElementById("tb");
        table.appendChild(tr);
    }
    function drop(obj){
        //获取table标签
        let table = obj.parentElement.parentElement.parentElement;
        //获取tr标签
        let tr= obj.parentElement.parentElement;
        //通过removeChild方法进行删除,目前在script里面提供的方法中只有它，
        //只有通过父类标签才可以将子类标签进行删除，子类标签不可以自己删除自己
        table.removeChild(tr);
    }
</script>
</html>